<template>
  <div>
    <my-header myheader="商品详情"></my-header>
      <mt-swipe class="swiperbox">
        <mt-swipe-item v-for="(itme,index) in imgsList" :key="index"><img :src="itme.src" alt=""></mt-swipe-item>
      </mt-swipe>
    <div class="goods-detail">
      <div>
        <h4 class="goods-title">{{goodsinfo.title}}</h4>
        <p class="goods-price">
          <span class="market-price">￥ {{goodsinfo.market_price}} </span>
          <span class="sell-price">￥ {{goodsinfo.sell_price}} </span>
        </p>
      </div>
      <div class="goods-info">
        <h4 class="goods-desc">商品参数</h4>
        <p>商品编号:{{goodsinfo.goods_no}}</p>
        <p>库存:{{goodsinfo.stock_quantity}}</p>
        <p>上架时间:{{goodsinfo.add_time | filter}}</p>
      </div>
      <mt-button type="primary" size="large" @click="jumpto('imgtxtinto')">图文介绍</mt-button>
      <mt-button type="danger" size="large" @click="jumpto('goodscomment')">商品评论</mt-button>
      <div class="goods-footer">
        <div class="goods-footer-item contact">
          <span class="iconfont icon-kefu"></span><span>联系客服</span></div>
        <div class="goods-footer-item cart">
          <span class="iconfont icon-gouwuche"></span>
          <span>购物车</span>
          <span class="badge" v-if="num > 0">{{ getcatrnum }}</span>
        </div>
        <div class="goods-footer-item add" @click="addcart()"><span>加入购物车</span></div>
        <div class="goods-footer-item buy" @click="addgoods('cart')"><span>立即购买</span></div>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from '@/components/myheader'
import {getinfo} from '@/api/goodsApi'
import {getthumimages} from '@/api/imgsApi'
import {getshopcarlist} from '@/api'
import {mapState, mapMutations, mapGetters} from 'vuex'
export default {
  data () {
    return {
      id: this.$route.params.id,
      goodsinfo: {},
      imgsList: [],
      cartList: [] // 购物车的信息
    }
  },

  components: {
    MyHeader
  },

  computed: {
    // cartNum () {
    //   let totlemun = 0
    //   this.cartList.map(itme => {
    //     if (itme.state) {
    //       totlemun = totlemun + itme.cou
    //     }
    //   })
    //   return totlemun
    // },
    ...mapState([
      'num'
    ]),
    ...mapGetters([
      'getcatrnum'
    ])
  },

  mounted () {
    getinfo(this.id)
      .then(res => {
        this.goodsinfo = res.message[0]
        // console.log(res)
      })
    getthumimages(this.id)
      .then(res => {
        // console.log(res)
        if (res.status === 0) {
          this.imgsList = res.message
        }
      })
    this.cartList = JSON.parse(localStorage.getItem('cartinfo') || '[]')
    this.totlennum()
  },
  beforeDestroy () {
    // console.log('销毁前哦')
    localStorage.setItem('cartinfo', JSON.stringify(this.cartList))
  },
  methods: {
    ...mapMutations([
      'setcatrnum',
      'totlennum'
    ]),
    jumpto (name) {
      this.$router.push({name: name, params: {id: this.id}})
    },
    // 立即购买
    addgoods (name) {
      getshopcarlist(this.id)
        .then(res => {
          // console.log(res)
          res.message[0]['state'] = true
          let cartinfoGoods = res.message[0]
          let inx = this.cartList.findIndex(itme => itme.id === parseInt(this.id))
          if (inx === -1) {
            this.cartList.push(cartinfoGoods)
            this.$router.push({name: name})
          } else {
            this.cartList[inx].cou += 1
            this.$router.push({name: name})
          }
        })
    },
    // 加入购物车
    addcart () {
      getshopcarlist(this.id)
        .then(res => {
          // console.log(res)
          res.message[0]['state'] = true
          let cartinfoGoods = res.message[0]
          let inx = this.cartList.findIndex(itme => itme.id === parseInt(this.id))
          if (inx === -1) {
            this.cartList.push(cartinfoGoods)
            if (this.cartList.length) {
              this.setcatrnum(this.$store.state.num + 1)
            } else {
              this.setcatrnum(1)
            }
          } else {
            this.cartList[inx].cou += 1
            let totle = 0
            this.cartList.map(itme => {
              if (itme.state) {
                totle += itme.cou
              }
            })
            this.setcatrnum(totle)
          }
        })
    }
  }
}

</script>
<style lang='scss' scoped>
.goods-detail {
  margin-bottom: 50px;
  padding: 0 10px;
}
.swiperbox {
  height: 300px;
  img {
    width: 100%;
  }
}

.goods-title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}
.goods-price {
  font-size: 14px;
  .market-price {
    text-decoration: line-through;
  }
  .sell-price {
    color: #e4393c;
  }
}

.goods-info {
  font-size: 14px;
   .goods-desc {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
  }
}

.goods-footer {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  width: 100%;
  border-top: 1px solid #e7e7e7;
  background-color: #fff;
  .goods-footer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .contact, .cart {
    width: 40%;
    font-size: 12px;
    position: relative;
  }
  .badge {
    position: absolute;
    top: 3%;
    left: 50%;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #e4393c;
    text-align: center;
    line-height: 14px;
    color: white;
  }
  .add, .buy {
    width: 60%;
    color: white;
    &>span {
      font-size: 20px;
    }
  }
  .add {
    background-color: #ff9600;
  }
  .buy {
    background-color: #e4393c;
  }
}
</style>
